<%@page import="transfer.Warehouse"%>
<%@page import="java.util.ArrayList"%>
<%@page import="content.WarehouseContent"%>
<%@page import="transfer.User"%>
<%@page import="transfer.Commodity"%>
<%@page import="java.util.HashMap"%>
<%@page import="controller.SessionAttribute"%>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry&libraries=places&language=en"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/helper.js"></script>
<script type="text/javascript" src="js/order.js"></script>

<div class="block">
    <div class="block-header">Warehouse selection</div>
    <div class="float_right" style="width: 480px;">
        <div id="googlemap" style="width: 450px; height:385px; padding: 10px; line-height: 1.5em; float: right;"></div>
        <%
            session = request.getSession();
            Boolean isSigned = (Boolean) session.getAttribute(SessionAttribute.SIGN_IN);
            transfer.Order order = (transfer.Order) session.getAttribute(SessionAttribute.CART);
            HashMap commodities = null;
            if (order == null || order.getCommodities().size() == 0) {
        %>
        <script>
            window.location.replace('index.jsp');
        </script>
        <%            }
            if (order != null) {
                commodities = order.getCommodities();
            }
        %>
        <br/>
        <span class="float_right" style="margin-top: 20px;" >
            <div class="table-view">
                <h3>Delivery</h3>
                <!--<span class="price" id ="pricespan"></span>-->
                Speed km/h:<span id="speedShipment" class="price"></span><br/>
                Cost per km:<span id ="pricePerKm" class="price"></span><br/>
            </div>
        </span>
        <div class="box" style="padding: 10px 20px; line-height: 1.5em; float: left; margin-top: 20px; margin-left: 15px">
            <h3>Shipping Information</h3>
            <div id="panel">
                <select id="start" onchange="get_location();
                changeWarehouseInfo();">
                    <%
                        ArrayList warehouses = WarehouseContent.getAllWarehouses();
                        for (int i = 0; i < warehouses.size(); i++) {
                            Warehouse w = (Warehouse) warehouses.get(i);
                    %>
                    <script>
            addWarehouse(
                        <%= w.getAddress().getLatitude()%>,
                        <%= w.getAddress().getLongitude()%>,
                    '<%= w.getNameWarehouse()%>'
                    );
                    </script>
                    <option value="<%= w.getNameWarehouse()%>" 
                            latitude="<%= w.getAddress().getLatitude()%>" 
                            longitude="<%= w.getAddress().getLongitude()%>" 
                            id="<%= w.getIdWarehouse()%>"
                            shipmentRate="<%= w.getShipmentRate()%>"
                            shipmentSpeed="<%= w.getShipmentSpeed()%>" >
                        <%= w.getNameWarehouse()%>
                    </option>
                    <%
                        }
                    %>
                </select>
            </div>	
            Shortcut: 
            <span class="blue-text" id="distance"></span>
            <span class="blue-text"> km</span>
            <br>	
        </div>  

        <div class="block"  id="location" name="radios" style="display: inline-block;"></div>

    </div>

    <div class="float_right" style="width: 500px; margin-left: 0px;" >
        <div class="block-header-item"><h3>Order info</h3></div>
        <H3>Items: </H3>

        <%
            if (commodities != null)
                for (int i = 0; i < commodities.size(); i++) {
                    Commodity c = (Commodity) commodities.keySet().toArray()[i];
                    Integer quantity = (Integer) commodities.values().toArray()[i];
        %>
        <div class="block" style =" clear: both;">
            <span class="float_left_abz"><%= c.getNameCommodity()%></span>
            <span class="float_right"><%= quantity%> x <%= c.getPrice()%>$</span>
        </div>
        <%
            }
        %>

        <H3>Cost of commodities:</H3>
        <div class="block">
            <table style="width: 100%;">
                <span id ="dsthtm" class="float_left_abz"><h id="commodities_quantity"><%= order.getCommodities().size()%></h></span> 
                <span class="float_right"></span><span class="float_right">$<h id="commodities_cost"><%= order.getCostCommodities()%></h></span>
            </table>
        </div>
        <H3>Shipping:</H3>
        <div class="block">
            <table style="width: 100%;">
                <span id ="dsthtm" class="float_left_abz"><h id="dist_value">0</h> km</span>
                <span id ="shprice" class="float_right"></span><span class="float_right">$<h id="shipping_price">0</h></span>
            </table>
        </div>

        <div style="width: 100%; margin-top: 5px; padding-top: 5px; border-top: 1px solid #ededed;">
            <span class="float_left"><H3>Total:</H3></span>
            <span class="float_right"><H3>$<h id="total_cost">0</h></H3></span>
        </div>
        <%
            User user = null;
            if (isSigned != null && isSigned.booleanValue()) {
                user = (User) session.getAttribute(SessionAttribute.USER);

        %>
        <script type="text/javascript">
            var signed = true;

            oldData.push('<%= user.getAddress().getCountry()%>');
            oldData.push('<%= user.getAddress().getCity()%>');
            oldData.push('<%= user.getAddress().getStreet()%>');
            oldData.push('<%= user.getAddress().getBuilding()%>');
            oldData.push('<%= user.getAddress().getFlat()%>');

            newData.push('<%= user.getAddress().getCountry()%>');
            newData.push('<%= user.getAddress().getCity()%>');
            newData.push('<%= user.getAddress().getStreet()%>');
            newData.push('<%= user.getAddress().getBuilding()%>');
            newData.push('<%= user.getAddress().getFlat()%>');

//            $("#email").attr('disabled', true);
//            $("#country").attr('disabled', true);
//            $("#city").attr('disabled', true);
//            $("#street").attr('disabled', true);
//            $("#building").attr('disabled', true);
//            $("#flat").attr('disabled', true);
        </script>
        <%
        } else {
        %>
        <script>
            $("#notify_email_box").hide();
        </script>
        <% }
        %>
        <div class="block-header-item" style="margin-top: 50px; clear: both;"><H3>Information about customer:</H3></div>
        <div class="box">
            <div class="table-view" style="padding: 10px 20px 10px 0px; line-height: 2em;">
                <%
                    if (isSigned == null || !isSigned.booleanValue()) {
                %>

                <div>Email:</div> <input id="email" type="email" /><span class="error" id="emailTip"></span><br/>

                <%   }
                %>
                <%
                    double longitude = 0.0;
                    double latitude = 0.0;
                    String email = "";

                    if (isSigned != null && isSigned.booleanValue()) {
                        String name = user.getFirstName() + " " + user.getLastName();
                        email = user.getEmail();
                        String address = user.getAddress().getCountry()
                                + ", " + user.getAddress().getCity()
                                + ", " + user.getAddress().getStreet()
                                + ", " + user.getAddress().getBuilding()
                                + ", Ap. " + user.getAddress().getFlat();

                        longitude = user.getAddress().getLongitude().doubleValue();
                        latitude = user.getAddress().getLatitude().doubleValue();
                %>

                <div>Name:</div><span><%= name%></span><br/>
                <div>E-mail:</div><span><%= email%></span><br/>
                <div>Address:</div><span><%= address%></span><br/>
                <div></div><input type="checkbox" id="change_address_check_box" onclick="changeAddress();"> Change address<br/>

                <%  }
                %>

                <span id="input-block">
                    <!--                <div>Country:<span class="text-red">*</span></div>  <input id ="country" type="text" required=""/><br/>
                                    <div>City:<span class="text-red">*</span></div> <input id ="city" type="text" required="" /><br/>
                                    <div>Street:<span class="text-red">*</span></div> <input id ="street" type="text" required="" /><br/>
                                    <div>Home:<span class="text-red">*</span></div> <input id="building" type="text" required=""/><br/>
                                    <div>Apartment:</div> <input type="text" id="flat" /><br/>-->
                    <div>Country:<span class="text-red">*</span></div> <input type="text" required="" id="country"   maxlength="40"/><span class="error" id="countryTip"></span><br/>
                    <div>City:<span class="text-red">*</span></div> <input type="text" required="" id="city"  maxlength="50"/><span class="error" id="cityTip"></span><br/>
                    <div>Street:<span class="text-red">*</span></div> <input type="text" required="" id="street"   maxlength="60"/><span class="error" id="streetTip"></span><br/>
                    <div>Building number:<span class="text-red">*</span></div> <input type="text" required="" id="building"  maxlength="40"/><span class="error" id="buildingTip"></span><br/>
                    <div>Apartment:</div> <input type="text" required="" id="flat"  maxlength="15"/><span class="error" id="flatTip"></span><br/>
                </span>
                <span class="hidden">
                    <input id="email" type="email" value="<%= email%>" /><br/>
                    <input type="text" id="latitude" value="<%= latitude%>"/><br/>
                    <input type="text" id="longitude" value="<%= longitude%>"/><br/>  
                </span>
            </div>
        </div>
    </div>        

    <h id="notify_email"><input type="checkbox" id="notify_email_box" /> Send information about change order status on email</h>

    <H3>Comment for order</H3>        
    <textarea id="comment_area" maxlength="1000"></textarea><br/>
    <div  class="float_left" style="width:500px; float:left">
        <!--            <h id="location"></h>-->

        <input type="button" value="Order" id="order_btn" onclick="order_btn_clicked();" />
    </div>
</div>
